import React, { useEffect, useState } from 'react';
import styled from 'styled-components'
import Scroll from '../../baseUI/scroll'

const Popupcontent = styled.div`
   .top-jumper {
        position: fixed;
        right: 50px;
        bottom:120px;
        width: 42px;
        height: 42px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 12px;
        &:before {
            content: '▲';
            display: block;
            text-align: center;
            color: #aaa;
            line-height: 42px;
        }
        &:hover:before {
            content: '回顶部';
        }
}
`;

const ScrollTop = (props) => {
    // console.log(props);
    const [show, setShow] = useState(false)
    const { display } = props;
    const { handleOnclick } = props;

    useEffect(() => {
        // console.log(document.documentElement.scrollTop);
    }, [])

    // const handleScrollTop = () => {
    //     let ScrollTop = document.documentElement.scrollTop
    //     console.log(ScrollTop, '222');
    // }


    return (

        <Popupcontent>
            <div className="top-jumper" onClick={() => { 
                console.log(document.documentElement.scrollTop) 
                
                Scroll.scrollTo(0, 500)
            }
            }>
                {/* <span className="text"> </span> */}
            </div>
        </Popupcontent>
    )
}
export default ScrollTop
